<template>
    <div class="welcome-page">
        <div class="main">
            <div class="left-title">
                <p>Welcome Back</p>
                <p>请先登录</p>
            </div>
            <div>
                <welcome-card></welcome-card>
                <div class="footer-bottom">
                    <div class="login-button" @click="goPage('login')">登录</div>
                    <div class="register-button" @click="goPage('register')">注册</div>
                </div>
            </div>

        </div>
    </div>
</template>

<script>

import welcomeCard from './welcome-card.vue';
export default {
    components: { welcomeCard },
    methods: {
        goPage(routerName) {
            this.$router.push({ name: routerName });
        }
    }
}
</script>

<style lang="scss" scoped>
.welcome-page {
    height: 100%;
    overflow: hidden;
    position: relative;
    box-sizing: border-box;
    @extend .u-s-n, .f-c, .a-i-c;

    .main {
        height: 100%;

        @extend .u-s-n, .w, .f-c;

        .left-title {
            color: #5b67ca;
            font-size: 36px;
            width: 40%;
            min-width: 300px;

            &:first-child {
                margin-top: 160px;
            }
        }


        .welcome-info {
            height: calc(100% - 150px);
            @extend .f-c, .a-i-c, .w;

            &>div {

                .welcome-png {
                    width: 40vh;
                    height: 40vh;
                }

                text {
                    font-size: 32px;
                    font-weight: 400;
                    color: #5b67ca;
                    text-align: center;
                    display: inline-block;
                    width: 100%;
                    margin-top: 30px;
                    margin-bottom: -10px;
                }

                span {
                    margin-top: -10px;
                    /** 文本1 */
                    font-size: 12px;
                    zoom: 0.6;
                    font-weight: 400;
                    letter-spacing: 0px;
                    color: rgba(91, 103, 202, 1);
                    width: 100%;
                    text-align: center;
                    display: inline-block;
                }


                .text-info {
                    font-size: 14px;
                    font-weight: 400;
                    margin-top: 30px;
                    color: rgba(44, 64, 110, 1);
                    text-align: center;
                    vertical-align: top;
                }

            }

        }


        .footer-bottom {
            position: absolute;
            max-width: 400px;
            width: 100%;
            height: 140px;
            bottom: 90px;

            padding: 0 26px;
            box-sizing: border-box;

            .login-button {
                border-radius: 14px;
                line-height: 52px;
                height: 52px;
                background: rgba(91, 103, 202, 1);
                box-shadow: -3px 7px 13px 0px rgba(241, 247, 255, 1);
                color: rgba(255, 255, 255, 1);
                text-align: center;
            }

            .register-button {
                margin-top: 30px;
                font-size: 16px;
                font-weight: 700;
                letter-spacing: 5px;
                line-height: 0px;
                color: rgba(91, 103, 202, 1);
                text-align: left;
                vertical-align: top;
                text-align: center;
            }
        }
    }
}
</style>